<template>
  <div>
    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中..."
              class="el-table-align-center">
      <el-table-column label="时间" prop="time" width="180">
        <template slot-scope="{row}">
          <div>{{row.createTime | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="操作人"></el-table-column>
      <el-table-column prop="optDesc" label="操作类别"></el-table-column>
      <el-table-column prop="optBeforeData" label="操作前">
        <!--<template slot-scope="{row}">-->
            <!--{{getOptData(row,1)}}-->
        <!--</template>-->
        <template slot-scope="{row}">
          <!--{{formatOptData(row,1)}}-->
          <div class="option-data-view" v-if="row.optType === 15 && row.formatOptDataBefore.commMode">
            <div
              class="option-item-view"
              v-if="row.formatOptDataBefore.commMode === 1"
            >
              <div>佣金链模式：现金网</div>
              <div
                v-for="(item, index) in row.formatOptDataBefore.itemList"
                :key="index"
              >
                {{index + 1}}级代理：{{item.proxyName || '--'}}，抽佣百分比：{{item.rate || 0}}%
              </div>
              <div>佣金方案：{{formatCashRuleName(row.formatOptDataBefore.cashRuleId)}}</div>
            </div>
            <div
              class="option-item-view cash-view"
              v-if="row.formatOptDataBefore.commMode === 2"
              @click="openDialog({ props: row, dialogName: dialogType.cashDetail})"
            >
              <div>佣金链模式：信用网</div>
              <div
                v-for="(item, index) in row.formatOptDataBefore.itemList"
                :key="index"
              >
                <div v-if="formatCashItem(row, index, 1)">
                  {{index + 1}}级代理：{{item.proxyName || '--'}}，分配百分比：{{item.rate || 0}}%
                </div>
                <div v-else :style="getShowStyle(index)">
                  ......
                </div>
              </div>
              <div>最低有效会员数：{{(row.formatOptDataBefore.minEffectMemberNum || 0)}}</div>
            </div>
          </div>
          <div v-else>
            {{row.optBeforeData}}
          </div>
        </template>
      </el-table-column>
       <el-table-column prop="optAfterData" label="操作后">
        <!--<template slot-scope="{row}">-->
            <!--{{getOptData(row)}}-->
        <!--</template>-->
         <template slot-scope="{row}">
           <!--{{formatOptData(row)}}-->
           <div class="option-data-view" v-if="row.optType === 15 && row.formatOptDataAfter.commMode">
             <div
               class="option-item-view"
               v-if="row.formatOptDataAfter.commMode === 1"
             >
               <div>佣金链模式：现金网</div>
               <div
                 v-for="(item, index) in row.formatOptDataAfter.itemList"
                 :key="index"
               >
                 {{index + 1}}级代理：{{item.proxyName || '--'}}，抽佣百分比：{{item.rate || 0}}%
               </div>
               <div>佣金方案：{{formatCashRuleName(row.formatOptDataAfter.cashRuleId)}}</div>
             </div>
             <div
               class="option-item-view cash-view"
               v-if="row.formatOptDataAfter.commMode === 2"
               @click="openDialog({ props: row, dialogName: dialogType.cashDetail})"
             >
               <div>佣金链模式：信用网</div>
               <div
                 v-for="(item, index) in row.formatOptDataAfter.itemList"
                 :key="index"
               >
                 <div v-if="formatCashItem(row, index, 2)">
                   {{index + 1}}级代理：{{item.proxyName || '--'}}，分配百分比：{{item.rate || 0}}%
                 </div>
                 <div v-else :style="getShowStyle(index)">
                   ......
                 </div>
               </div>
               <div>最低有效会员数：{{(row.formatOptDataAfter.minEffectMemberNum || 0)}}</div>
             </div>
           </div>
           <div v-else>
             {{row.optAfterData === '' ? getOptData(row) : row.optAfterData}}
           </div>
         </template>
      </el-table-column>
      <!--<el-table-column prop="ip" label="IP"></el-table-column>-->
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMemberOperatorLogs } from '@/services/api/member';
import { grid } from '@/build';
import { getCommissionSelect, getCommissionCaseSelectList } from '@/services/api/commission';

export default {
  name: 'user-operate-table-logs',
  mixins: [grid],
  data() {
    return {
      tableData: {},
      filters: {
        userId: this.$store.state.member.member_id,
        page: 1,
        size: 20,
      },
      filterDateType: false,
      commSeleList: [],
      commCaseSeleList: [],
    };
  },
  methods: {
    getOptData(row, type) {
      const { optType, optData, optBeforeData, optDesc } = row;
      const contentData = (type && type === 1) ? optBeforeData : optData;
      // const optDataArr = contentData.split(',');
      // switch (optType) {
      //   case 1:
      //     return `上级代理${row.username}：${contentData}`;
      //   case 2:
      //     return `修改：${this.formatPhoneEmail(contentData)}`;
      //   case 3:
      //     return '重置银行卡及姓名';
      //   case 4:
      //     return '状态修改：完全锁定';
      //   case 5:
      //     return '状态修改：间接锁定';
      //   case 6:
      //     return '状态修改：解除锁定';
      //   case 7:
      //     return `返佣模式：${contentData}`;
      //   case 8:
      //     return `银行卡ID：${contentData}`;
      //   case 9:
      //     return `修改备注：${contentData}`;
      //   case 10:
      //     return `额度：${optDataArr[0]}，状态：${_.toConverter(parseInt(optDataArr[1]), 'AGENCY_CREDIT_STATUS')}`;
      //   default:
      //     return contentData;
      // }
      switch (optType) {
        case 1:
          return `上级代理ID：${contentData}`;
        case 2:
          return `修改：${this.formatPhoneEmail(contentData)}`;
        case 3:
          return '重置银行卡及姓名';
        case 4:
          return '状态修改：完全锁定';
        case 5:
          return '状态修改：间接锁定';
        case 6:
          return '状态修改：解除锁定';
        case 7:
          return optDesc ? optDesc.replace('修改代理返佣模式:', '变更为:') : null;
        case 8:
          return `银行卡ID：${contentData}`;
        case 9:
          return `修改备注：${contentData}`;
        case 10:
          const optDataArr = contentData.split(',');
          return `额度：${optDataArr[0]}，状态：${_.toConverter(parseInt(optDataArr[1]), 'AGENCY_CREDIT_STATUS')}`;
        case 11:
          return `清算额度：${contentData}`;
        case 13:
          return `状态：${contentData == 1 ? '开启' : '关闭'}`;
        case 14:
          return this.formatFeeRuleName(contentData);
        case 15:
          return null;
        default:
          return contentData;
      }
    },
    formatPhoneEmail(val) {
      let res = '';
      if (val && val != '') {
        const phoneShowPartial = this.roleCheck('phone-show-partial');
        const phoneShowAll = this.roleCheck('phone-show-all');
        const emailShowPartial = this.roleCheck('email-show-partial');
        const emailShowAll = this.roleCheck('email-show-all');
        if (val.indexOf(',') > -1) {
          const arr = val.split(',');
          if (arr.length > 2) {
            res = `${arr[0]},${_.formatUserPhoneEmail(arr[1], phoneShowPartial, phoneShowAll)},
                    ${_.formatUserPhoneEmail(arr[2], emailShowPartial, emailShowAll)}`;
          } else {
            res = _.formatUserPhoneEmail(arr[1], phoneShowPartial, phoneShowAll);
          }
        } else {
          res = _.formatUserPhoneEmail(val, emailShowPartial, emailShowAll);
        }
      }
      return res;
    },
    formatFeeRuleName(id) {
      if (!this.commSeleList.length) return null;
      const { name } = this.commSeleList.find(item => item.id === Number(id)) || {};
      return name;
    },
    formatCashItem(row, index, type) {
      const len = type === 1 ? row.formatOptDataBefore.itemList.length : row.formatOptDataAfter.itemList.length;
      if (len < 3) return true;
      if (index === len - 1 || index < 2) return true;
      return false;
    },
    formatCashRuleName(id) {
      if (!this.commCaseSeleList.length) return null;
      const { name } = this.commCaseSeleList.find(item => item.id === id) || {};
      return name;
    },
    getShowStyle(index) {
      if (index === 2) return {};
      return { display: 'none' };
    },
  },

  mounted() {
    this.bindGet(getCommissionSelect, 'commSeleList');
    this.bindGet(getCommissionCaseSelectList, 'commCaseSeleList');
    this.bindGet(getMemberOperatorLogs, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      format: (data) => {
        const { list = [] } = data;
        const resList = list.map((item) => {
          if (item.optType !== 15) return item;
          return {
            ...item,
            formatOptDataBefore: item.optBeforeData === '' ? '' : JSON.parse(item.optBeforeData),
            formatOptDataAfter: item.optAfterData === '' ? (item.optData === '' ? '' : JSON.parse(item.optData)) : JSON.parse(item.optAfterData),
          };
        });
        return {
          ...data,
          list: resList,
        };
      },
    });
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
</style>
